<h1>Tabs</h1>
<h4>Default</h4>
<FluentTabs id="myTab" activeId="TabTwo">
    <FluentTab id="TabOne">Tab one</FluentTab>
    <FluentTab id="TabTwo">Tab two</FluentTab>
    <FluentTab id="TabThree">Tab three</FluentTab>
    <FluentTabPanel id="TabPanelOne">
        Tab one content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel id="TabPanelTwo">
        Tab two content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel id="TabPanelThree">
        Tab three content. This is for testing.
    </FluentTabPanel>
    <div>Testing</div>
</FluentTabs>
<h4>Vertical</h4>
<FluentTabs Orientation="Orientation.Vertical">
    <FluentTab>Tab one</FluentTab>
    <FluentTab>Tab two</FluentTab>
    <FluentTab>Tab three</FluentTab>
    <FluentTabPanel>
        Tab one content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel>
        Tab two content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel>
        Tab three content. This is for testing.
    </FluentTabPanel>
</FluentTabs>
<h4>Supplemental content</h4>
<FluentTabs>
    <div slot="start">
        <button>1</button>
        <button>2</button>
        <button>3</button>
    </div>
    <div slot="end">
        <button>1</button>
        <button>2</button>
        <button>3</button>
    </div>
    <FluentTab>Tab one</FluentTab>
    <FluentTab>Tab two</FluentTab>
    <FluentTab>Tab three</FluentTab>
    <FluentTabPanel>
        Tab one content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel>
        Tab two content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel>
        Tab three content. This is for testing.
    </FluentTabPanel>
</FluentTabs>
<h4>Supplemental content - Vertical</h4>
<FluentTabs Orientation="Orientation.Vertical">
    <div slot="start">
        <button>1</button>
        <button>2</button>
        <button>3</button>
    </div>
    <div slot="end">
        <button>1</button>
        <button>2</button>
        <button>3</button>
    </div>
    <FluentTab>Tab one</FluentTab>
    <FluentTab>Tab two</FluentTab>
    <FluentTab>Tab three</FluentTab>
    <FluentTabPanel>
        Tab one content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel>
        Tab two content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel>
        Tab three content. This is for testing.
    </FluentTabPanel>
</FluentTabs>
<h4>No active indicator</h4>
<FluentTabs ActiveIndicator="false" activeId="TabTwo">
    <FluentTab id="TabOne">Tab one</FluentTab>
    <FluentTab id="TabTwo">Tab two</FluentTab>
    <FluentTab id="TabThree">Tab three</FluentTab>
    <FluentTabPanel id="TabPanelOne">
        Tab one content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel id="TabPanelTwo">
        Tab two content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel id="TabPanelThree">
        Tab three content. This is for testing.
    </FluentTabPanel>
</FluentTabs>
<h4>No active indicator - Vertical</h4>
<FluentTabs ActiveIndicator="false" Orientation="Orientation.Vertical">
    <FluentTab>Tab one</FluentTab>
    <FluentTab>Tab two</FluentTab>
    <FluentTab>Tab three</FluentTab>
    <FluentTabPanel>
        Tab one content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel>
        Tab two content. This is for testing.
    </FluentTabPanel>
    <FluentTabPanel>
        Tab three content. This is for testing.
    </FluentTabPanel>
</FluentTabs>
